<template>
	<view>
		<view v-if="isShow">
			<view class="custom-header">
				<view class="title">{{ "svga预览区" }}</view>
			</view>
			<!-- 列表区域 -->
			<view class="list-area">
				<view class="list-item" v-for="(item, index) in playData" :key="index">
					<div class="list-img">
						<image :src="item.image"></image>
					</div>
					<view class="list-item-title">{{ item.name }}</view>
					<view @click="preview(item.file)" class="pre_view">预 览</view>
				</view>
			</view>
		</view>
		<!-- 视频播放区域 -->
		<video v-if="!isShow" @ended="onVideoEnded" :src="videoSrc" ref="videoPlayer" :autoplay="autoplay"
			:controls="false" style="width: 100vw; height: 100vh;"></video>
	</view>
</template>

<script>
	import {
		playData
	} from "./mock.js";
	export default {
		data() {
			return {
				playData: [],
				isShow: true,
				videoSrc: 'http://pub.shuali.com.cn/uploads/20240514/lv6bZUd3FQUTUHFKWKizljbPHFcs.mp4', // 视频文件地址
				autoplay: true, // 是否自动播放
			};
		},
		onLoad() {
			this.playData = playData;
		},
		methods: {
			preview(url) {
				// 隐藏tabbar
				uni.hideTabBar({
					animation: true, // 是否需要动画效果，默认为 false
					success: function() {}
				});
				this.isShow = false
				this.videoSrc = url
				// return
				// this.$nextTick(() => {
				// 	this.$refs.videoPlayer.play();
				// })
				// return
				// uni.navigateTo({
				// 	url: `/pages/play/webView/webView?url=${url}`
				// });
			},
			// 播放结束
			onVideoEnded() {
				uni.showTabBar()
				this.isShow = true
			},
			// 视频暂停
			 pauseVideo() {
			      uni.pauseVideo({
			        success: function () {
			          console.log('视频暂停成功');
			        },
			      });
			    },
		}
	};
</script>

<style lang="scss">
	.custom-header {
		display: flex;
		justify-content: space-between;
		justify-content: center;
		align-items: center;
		height: 180rpx;
		background-color: #f7f7f7;

		.title {
			font-size: 18px;
			padding-top: 80rpx;
		}
	}

	.list-area {
		width: 710rpx;
		padding: 10rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		height: 86vh;
		overflow-y: auto;
	}

	.list-item {
		width: 160rpx;
		// height: 200rpx;
		margin: 15rpx 10rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		position: relative;
		text-align: center;
	}

	.list-item-title {
		color: #353434;
		font-size: 28rpx;
	}

	.list-img {
		width: 160rpx;
		height: 160rpx;
	}

	.list-img image {
		width: 160rpx;
		height: 160rpx;
	}

	.pre_view {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		margin: 18rpx 0;
		background: rgb(0, 153, 255);
		border-radius: 50rpx;
		color: #fff;
	}
</style>